<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">
 
    <h:head>
        <title>Clube do livro</title>
    </h:head>
    <h:body>
    	<p:growl id="growl" showDetail="true" />

<h:form id="form">

    <p:fieldset id="container" legend="PrimeChat" toggleable="true">

        <h:panelGroup rendered="#{administrarChatBean.estaLogado}">

            <h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
                <p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs"/>

                <p:dataList id="users" var="user" value="#{gerenciaUsuariosDoChat.usuariosLogadosNoChat}" styleClass="usersList">
                    <f:facet name="header">
                        Users
                    </f:facet>

                    <p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
                        <f:setPropertyActionListener value="#{user}" target="#{administrarChatBean.usuarioPrivado}" />
                    </p:commandButton>
                    #{user}
                </p:dataList>
            </h:panelGrid>

            <p:separator />

            <p:inputText value="#{administrarChatBean.mensagemGlobal}" styleClass="messageInput" />
            <p:spacer width="5" />
            <p:commandButton value="Enviar" actionListener="#{administrarChatBean.mandarMensagemGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
            <p:spacer width="5" />
            <p:commandButton value="Desconectar" actionListener="#{administrarChatBean.desconectar}" global="false" update="container" />
        </h:panelGroup>

        <h:panelGroup rendered="#{not administrarChatBean.estaLogado}" >
            Nome de usuário: <p:inputText value="#{administrarChatBean.nomeDeUsuario}" />

            <p:spacer width="5" />
            <p:commandButton value="Entrar no clube" actionListener="#{administrarChatBean.login}" update="container" 
                                icon="ui-icon-person" />
        </h:panelGroup>

    </p:fieldset>

    <p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
        <h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
            <p:outputLabel for="pChatInput" value="To: #{administrarChatBean.usuarioPrivado}" />
            <p:inputTextarea id="pChatInput" value="#{administrarChatBean.mensagemPrivada}" rows="5" cols="30" />

            <p:spacer />
            <p:commandButton value="Enviar pessoal" actionListener="#{administrarChatBean.mandarMensagemPrivada}" oncomplete="pChat.hide()" />
        </h:panelGrid>
    </p:dialog>

</h:form>

<p:socket onMessage="tratarMensagem" channel="/chat" autoConnect="false" widgetVar="subscriber"/>

<script type="text/javascript">
    function tratarMensagem(data) {
        var chatContent = $(PrimeFaces.escapeClientId('form:public'));
        chatContent.append(data + '<br />');

        chatContent.scrollTop(chatContent.height());
    }
</script>
                    
    </h:body>
</html>